<template>
	<view>
		<view class="head">
			<view class="head_left" @tap="toNext">
				<text>跳过</text>
			</view>
			<text class="head_mid">推荐好友</text>
			<view class="save" @tap="allselect">
				<image v-if="isAllSelect" src="/static/index/theselected.png" mode=""></image>
				<image src="/static/index/uncheck.png" mode="" v-else></image>
				<text>全选</text>
			</view>
		</view>
		<view class="body">
			<view class="body-item" v-for="(item,index) in userData" :key="index">
				<view class="" @tap="toSelect(index)">
					<image class="selectone" v-if="item.select==true" src="/static/index/theselected.png" mode=""></image>
					<image class="selectone" v-else-if="item.select==false" src="/static/index/uncheck.png" mode=""></image>
				</view>

				<view class="">
					<view class="avatar-container">
						<image mode="aspectFill" :src="item.avatar"></image>
						<image class="country" :src="item.national_flag" mode=""></image>

					</view>
					<view class="right_body">
						<view class="title_box">
							<view class="nickname-and">
								<text class="nickname textOverflow">{{item.nick_name}}</text>
							</view>
							<view class="img-sex">
								<image class="image_box" v-if="item.sex==2" src="/static/woman.png"></image>
								<image class="image_box" v-else src="/static/man.png"></image>
							</view>
							<view class="authentication_box" v-if="item.identify!=''">
								实名认证
							</view>
							<view class="authentication_box2" v-else>
								未认证
							</view>

							<view class="authentication_box shenfen" v-if="item.overseas_auth" v-text="item.overseas_identity_name"></view>
							<view class="authentication_box2 shenfen" v-else>
								境外身份
							</view>
						</view>

						<text v-text="item.address_str" class="textOverflow"></text>

						<view class="common_ys textOverflow">
							国籍:
							<text v-if="item.hometown!=''" v-text="item.hometown"></text>
							<text v-else>未知</text>
							掌握语言:
							<text v-if="item.languages!=''">{{item.languages}}</text>
							<text v-else>未知</text>
						</view>
						<view class="common_ys textOverflow">
							偏好:
							<text v-if="item.preference!=''" v-text="item.preference"></text>
							<text v-else>未知</text>
							<view class="guanxi" v-show="item.relation_chain" v-text="item.relation_chain"></view>
							<view class="" v-show="item.distance!=null">{{item.distance}}km</view>
						</view>
					</view>
				</view>

				<!-- <view class="address-and" @tap="addFriend">
					添加
				</view> -->
			</view>
		</view>
		<view class="btn-box"@tap="addFriend">
			<view class="btn">
				添加{{number}}
			</view>
		</view>
	</view>
</template>

<script>
	import amap from '../../../common/amap-wx.js'
	import webim from '../../../common/webim_wx.min.js'


	export default {
		data() {
			return {
				addressInfo: '',
				userData: [],
				isAllSelect: true,
				key: '1d31d958050c47a1c7bcaeeb7e47ebdd', //高德地图key
				addressInfo: null, //定位信息
				add_friend_item:[],
			}
		},
		onLoad() {
			this.amapPlugin = new amap.AMapWX({
				key: this.key
			});
		},
		onShow() {
			// this.addressInfo = JSON.parse(uni.getStorageSync('addressInfo'));
			this.addressInfo = uni.getStorageSync('addressInfo');

			this.getData()
		},
		mounted() {
			var me=this;
			this.amapPlugin.getRegeo({ //定位
				success: (data) => {
					console.log(data[0].regeocodeData.addressComponent.country);
					uni.setStorageSync('addressInfo', JSON.stringify(data[0]));
					me.addressInfo = JSON.stringify(data[0]);
					uni.setStorageSync('nowCountry', data[0].regeocodeData.addressComponent.country)
					uni.setStorageSync('nowCity', data[0].regeocodeData.addressComponent.city)
				},
				fail: (e) => {
					var obj = {
						desc: '北京',
						latitude: '39.915',
						longitude: '116.404',
						name: '北京',
						regeocodeData: {
							addressComponent: {
								adcode: '0',
								city: '北京',
								citycode: '0',
								country: '中国',
								district: '北京',
								province: '北京',
								towncode: '0',
								township: '北京',
							}
						}
					}
					console.log(obj);
					uni.setStorageSync('addressInfo', JSON.stringify(obj));
					// me.addressInfo = JSON.stringify(obj);
				}
			});
		},
		methods: {
			getData() {
				var me = this;
				var data = {
					searchParam: {
						longitude: this.addressInfo.latitude,
						latitude: this.addressInfo.longitude,
						search_type: 'recommend'
					},

				}
				this.myAjaxNewPost({ //热门境友
					model: 'user',
					controllerName: 'userInfo',
					actionName: 'queryUserListPage',
					data: data,
					successBack: function(res) {
						console.log(res)
						me.userData = res.data.data
						for (var i = 0; i < me.userData.length; i++) {
							me.userData[i].select = true
						}
					},
				})
			},
			toSelect(index) {
				if (this.userData[index].select == true) {
					// this.userData[index].select = false
					var obj=this.userData[index]
					obj.select=false;
					this.userData.splice(index,1,obj)
					this.isAllSelect = false
				} else if (this.userData[index].select == false) {
					var obj=this.userData[index]
					obj.select=true;
					this.userData.splice(index,1,obj)
					// this.userData[index].select = true
				}
				console.log(this.userData[index])
			},
			allselect() {
				if (this.isAllSelect == true) {
					for (var i = 0; i < this.userData.length; i++) {
						this.userData[i].select = false
					}
					this.isAllSelect = false
				} else {
					for (var i = 0; i < this.userData.length; i++) {
						this.userData[i].select = true
					}
					this.isAllSelect = true
				}
			},
			toNext() {
				if(uni.getStorageSync('isweixinLog')!=undefined){
					this.getuserinfo()
					uni.removeStorageSync('isweixinLog')
					uni.switchTab({
						// url: '/pages/Index/index'
						url:'/pages/tabBer/CrossBorder/CrossBorder'
					})
				}else{
					this.login()
				}
				
			},
			getuserinfo(){
				var data={
					user_id:uni.getStorageSync('user_id')
				}
				this.myAjaxNew({
					model: 'user',
					controllerName: 'userInfo',
					actionName: 'queryUserInfoById',
					data: data,
					successBack: function(res) {
						console.log(res)
						uni.setStorageSync('user_info', res.data.data.userInfoEntity);
					},
				})
			},
			login() { //登录
				var loginName=uni.getStorageSync('loginName')
				var password=uni.getStorageSync('password')
					var data = {
						login_name: loginName,
						login_pass: password,
						login_type: '1',
					}
				
				console.log(data);
				var me = this;
				this.myAjaxNewPost({
					model: 'user',
					controllerName: 'user',
					actionName: 'login',
					data: data,
					successBack: function(res) {
						console.log(res)
						// console.log(res.data.data.data.token)
						// console.log(res.data.data.data.nick_name);
						uni.showToast({
							title: res.data.message,
							icon: 'none'
						})
						if (res.data.code == '0') {
							if (res.data.data.userInfoEntity.nick_name !== null) {

							}
							uni.setStorageSync('user_id', res.data.data.userInfoEntity.user_id);
							console.log(res.data.data.userInfoEntity.user_id + '登录ID！')
							uni.setStorageSync('avatar', res.data.data.userInfoEntity.avatar);
							uni.setStorageSync('nick_name', res.data.data.userInfoEntity.nick_name);
							uni.setStorageSync('user_info', res.data.data.userInfoEntity);
							uni.setStorageSync('user_sign', res.data.data.userSign)
							var arr = res.data.data.userInfoEntity.hometown.split('·')
							uni.setStorageSync('countryName', arr[0])
							console.log(arr)
							uni.switchTab({
								// url: '/pages/Index/index'
								url:'/pages/tabBer/CrossBorder/CrossBorder'
							})
						}
					},
				})
			},
			addFriend(){
				for(var i=0;i<this.userData.length;i++){
					if(this.userData[i].select==true){
						var obj={
							'To_Account': this.userData[i].user_id,
							"AddSource": "AddSource_Type_Unknow",
							"AddWording": "" //加好友附言，可为空
						}
						this.add_friend_item.push(obj)
					}
				}
				var options = {
					'From_Account': uni.getStorageSync('user_id'),
					'AddFriendItem': this.add_friend_item
				};
				webim.applyAddFriend(
					options,
					function(resp) {
						uni.showToast({
							title:'添加好友成功',
							icon:'none'
						})
					},
					function(err) {
						console.log(err + "申请失败");
					}
				);
				if(uni.getStorageSync('isweixinLog')!=undefined){
					this.getuserinfo()
					uni.removeStorageSync('isweixinLog')
					uni.switchTab({
						// url: '/pages/Index/index'
						url:'/pages/tabBer/CrossBorder/CrossBorder'
					})
				}else{
					this.login()
				}
			},
		}
	}
</script>

<style scoped>
	.head {
		height: 162upx;
		display: flex;
		justify-content: space-between;
		font-size: 32upx;
		padding: 0 24upx;
		background: #ffffff;
		position: fixed;
		top: 0;
		width: 100%;
		z-index: 9999;
	}

	.head_left {
		display: flex;
		align-items: center;
		color: #666666;
		width: 100upx;
		padding-top:70upx;
	}

	.head_mid {
		font-size: 36upx;
		color: #333333;
		padding-top: 90upx;
	}

	.save {
		padding-top: 68upx;
		display: flex;
		align-items: center;
	}

	.save image {
		width: 34upx;
		height: 34upx;
		padding-right: 10upx;
	}

	.body {
		margin-top: 182upx;
		background: #FFFFFF;
		padding-bottom: 120upx;
	}

	.body-item {
		width: 100%;
		display: flex;
		align-items: center;
		justify-content: space-between;
		padding: 20upx 24upx;
		box-sizing: border-box;
		border-bottom: 1upx solid #E6E6E6;
	}

	.selectone {
		width: 48upx;
		height: 48upx;
	}

	.avatar-container {
		width: 125upx;
		height: 125upx;
		float: left;
		position: relative;
		margin-right: 30upx;
	}

	.avatar-container image {
		width: 100%;
		height: 100%;
		border-radius: 5upx;
		border-radius: 50%;
		overflow: hidden;
	}

	.avatar-container .country {
		width: 33upx;
		height: 33upx;
		border-radius: 50%;
		overflow: hidden;
		position: absolute;
		left: 0;
		bottom: 0;
		z-index: 10;
	}

	.shenfen {
		overflow: hidden;
		text-overflow: ellipsis;
		white-space: nowrap;
		max-width: 120upx;
		margin-left: 10upx;
	}

	.right_body {
		height: 125upx;
		display: flex;
		flex-direction: column;
	}

	.title_box {
		display: flex;
		align-items: center;
		position: relative;
		justify-content: flex-start;
	}

	.time {
		height: 24upx;
		width: 84upx;
		line-height: 24upx;
		color: #FFFFFF;
		font-size: 14upx;
		background: #999999;
		border-radius: 24upx;
		padding-left: 30upx;
		position: absolute;
		left: 10upx;
		bottom: 0upx;
		opacity: 0.8;
	}


	.item-main {
		height: 125upx;
	}

	.nickname-and {
		display: flex;
		justify-content: space-between;
		align-items: center;
	}

	.nickname {
		max-width: 200upx;
		font-size: 30upx;
		line-height: 40upx;
		margin-right: 10upx;
	}

	.img-sex {
		margin-right: 10upx;
	}

	.image_box {
		width: 35upx;
		height: 37upx;
	}

	.authentication_box {
		max-width: 80upx;
		border: 1upx solid #33cbcc;
		float: left;
		border-radius: 5upx;
		box-sizing: border-box;
		text-align: center;
		line-height: 25upx;
		height: 25upx;
		font-size: 16upx;
		color: #33cbcc;
		padding: 0 5upx;
	}

	.authentication_box2 {
		border: 1upx solid #8E8F9F;
		float: left;
		border-radius: 5upx;
		box-sizing: border-box;
		text-align: center;
		line-height: 25upx;
		height: 25upx;
		font-size: 16upx;
		color: #8E8F9F;
		padding: 0 5upx;
	}




	.common_ys {
		width: 400upx;
		font-size: 26upx;
		line-height: 40upx;
		color: #404a4c;
		display: flex;
	}

	.common_ys text {
		margin: 0 10upx;
	}

	.address-and {
		background: #46CECF;
		color: #FFFFFF;
		width: 94upx;
		height: 60upx;
		border-radius: 10upx;
		text-align: center;
		font-size: 26upx;
		line-height: 60upx;
	}

	.btn-box {
		background: #FFFFFF;
		height: 120upx;
		width: 100%;
		padding: 16upx 24upx;
		position: fixed;
		bottom: 0upx;
		box-sizing: border-box;
		z-index: 9999;
	}
</style>
